﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Types/Event</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Event">Event</a></h4>
			<div class="menu-item"><a href="#DOMEvent:constructor">constructor</a></div>
			<div class="menu-item"><a href="#DOMEvent:stop">stop</a></div>
			<div class="menu-item"><a href="#DOMEvent:stopPropagation">stopPropagation</a></div>
			<div class="menu-item"><a href="#DOMEvent:preventDefault">preventDefault</a></div>
			<div class="menu-item"><a href="#DOMEvent:DOMEvent-defineKey">DOMEvent.defineKey</a></div>
			<div class="menu-item"><a href="#DOMEvent:DOMEvent-defineKeys">DOMEvent.defineKeys</a></div>

    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Event"><a href="#Event">Type: DOMEvent</a></h1>

<p class="description">MooTools DOMEvent Methods.</p>

<h2 id="DOMEvent:constructor"><a href="#DOMEvent:constructor">DOMEvent Method: constructor</a></h2>

<h3 class="description">Syntax:</h3>

<pre class="javascript"><span class="kw2">new</span> DOMEvent<span class="br0">(</span><span class="br0">[</span>event<span class="br0">[</span>, win<span class="br0">]</span><span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments:</h3>

<ol>
<li>event - (<em>event</em>, required) An HTMLEvent Object.</li>
<li>win   - (<em>window</em>, optional: defaults to window) The context of the event.</li>
</ol>
<h4>Properties:</h4>

<ul>
<li>page.x        - (<em>number</em>) The x position of the mouse, relative to the full window.</li>
<li>page.y        - (<em>number</em>) The y position of the mouse, relative to the full window.</li>
<li>client.x      - (<em>number</em>) The x position of the mouse, relative to the viewport.</li>
<li>client.y      - (<em>number</em>) The y position of the mouse, relative to the viewport.</li>
<li>rightClick    - (<em>boolean</em>) True if the user clicked the right mousebutton</li>
<li>wheel         - (<em>number</em>) The amount of third button scrolling.</li>
<li>relatedTarget - (<em>element</em>) The event related target.</li>
<li>target        - (<em>element</em>) The event target.</li>
<li>code          - (<em>number</em>) The keycode of the key pressed.</li>
<li>key           - (<em>string</em>) The key pressed as a lowercase string. key can be 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', and 'esc'.</li>
<li>shift         - (<em>boolean</em>) True if the user pressed the shift key.</li>
<li>control       - (<em>boolean</em>) True if the user pressed the control key.</li>
<li>alt           - (<em>boolean</em>) True if the user pressed the alt key.</li>
<li>meta          - (<em>boolean</em>) True if the user pressed the meta key.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myLink'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// the passed event parameter is already an instance of the Event type.</span>
    <span class="kw3">alert</span><span class="br0">(</span>event.<span class="me1">key</span><span class="br0">)</span>;   <span class="co1">// returns the lowercase letter pressed.</span>
    <span class="kw3">alert</span><span class="br0">(</span>event.<span class="me1">shift</span><span class="br0">)</span>; <span class="co1">// returns true if the key pressed is shift.</span>
    <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">key</span> == <span class="st0">'s'</span> &amp;&amp; event.<span class="me1">control</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'Document saved.'</span><span class="br0">)</span>; <span class="co1">//executes if the user presses Ctr+S.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>Accessing event.page / event.client requires the page to be in <a href="http://hsivonen.iki.fi/doctype/">Standards Mode</a>.</li>
<li>Every event added with addEvent gets the MooTools method automatically, without the need to manually instance it.</li>
</ul>
<h2 id="DOMEvent:stop"><a href="#DOMEvent:stop">DOMEvent Method: stop</a></h2>

<p class="description">Stop an event from propagating and also executes preventDefault.</p>

<h3>Syntax:</h3>

<pre class="javascript">myEvent.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This DOMEvent instance.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML:</h5>

<pre class="javascript">&lt;a id=<span class="st0">"myAnchor"</span> href=<span class="st0">"http://google.com/"</span>&gt;Visit Google.<span class="me1">com</span>&lt;/a&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myAnchor'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    event.<span class="kw3">stop</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//Prevents the browser from following the link.</span>
    <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, <span class="st0">'Where do you think you<span class="es0">\'</span>re going?'</span><span class="br0">)</span>; <span class="co1">//'this' is Element that fires the Event.</span>
    <span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw1">this</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'text'</span>, <span class="st0">'Instead visit the Blog.'</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">'href'</span>, <span class="st0">'http://blog.mootools.net'</span><span class="br0">)</span>;
    <span class="br0">}</span><span class="br0">)</span>.<span class="me1">delay</span><span class="br0">(</span><span class="nu0">500</span>, <span class="kw1">this</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes:</h3>

<ul>
<li>Returning false within the function can also stop the propagation of the Event.</li>
</ul>
<h3>See Also:</h3>

<ul>
<li>
<a href="../element/element.event.html#Element:addEvent">Element.addEvent</a>, <a href="#DOMEvent:stopPropagation">DOMEvent.stopPropagation</a>, <a href="#DOMEvent:preventDefault">DOMEvent.preventDefault</a>, <a href="Function.html#Function:delay">Function:delay</a>
</li>
</ul>
<h2 id="DOMEvent:stopPropagation"><a href="#DOMEvent:stopPropagation">DOMEvent Method: stopPropagation</a></h2>

<p class="description">Cross browser method to stop the propagation of an event (this stops the event from bubbling up through the DOM).</p>

<h3>Syntax:</h3>

<pre class="javascript">myEvent.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This DOMEvent object.</li>
</ul>
<h3>Examples:</h3>

<p>"#myChild" does not cover the same area as myElement. Therefore, the 'click' differs from parent and child depending on the click location:</p>

<h5>HTML:</h5>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;
    &lt;div id=<span class="st0">"myChild"</span>&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'click'</span><span class="br0">)</span>;
    <span class="kw1">return</span> <span class="kw2">false</span>; <span class="co1">//equivalent to stopPropagation.</span>
<span class="br0">}</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myChild'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    event.<span class="me1">stopPropagation</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//prevents the event from bubbling up, and fires the parent's click event.</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="../Element/Element.Event.html#Element:addEvent">Element:addEvent</a></li>
<li><a href="https://developer.mozilla.org/en/DOM/event.stopPropagation">MDC event.stopPropagation</a></li>
</ul>
<h2 id="DOMEvent:preventDefault"><a href="#DOMEvent:preventDefault">DOMEvent Method: preventDefault</a></h2>

<p class="description">Cross browser method to prevent the default action of the event.</p>

<h3>Syntax:</h3>

<pre class="javascript">myEvent.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns:</h3>

<ul>
<li>(<em>object</em>) This DOMEvent object.</li>
</ul>
<h3>Examples:</h3>

<h5>HTML:</h5>

<pre class="javascript">&lt;form&gt;
    &lt;input id=<span class="st0">"myCheckbox"</span> type=<span class="st0">"checkbox"</span> /&gt;
&lt;/form&gt;
</pre>

<h5>JavaScript</h5>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myCheckbox'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'click'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    event.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//prevents the checkbox from being "checked".</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>See Also:</h3>

<ul>
<li><a href="../Element/Element.Event.html#Element:addEvent">Element:addEvent</a></li>
<li><a href="https://developer.mozilla.org/en/DOM/event.preventDefault">MDC event.preventDefault</a></li>
</ul>
<h2 id="DOMEvent:DOMEvent-defineKey"><a href="#DOMEvent:DOMEvent-defineKey">Function: DOMEvent.defineKey</a></h2>

<p class="description">This function allows to add an additional event key code.</p>

<h4>Example:</h4>

<pre class="javascript">DOMEvent.<span class="me1">defineKey</span><span class="br0">(</span><span class="nu0">16</span>, <span class="st0">'shift'</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">key</span> == <span class="st0">'shift'</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'You pressed shift.'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h4>Predefined keys:</h4>

<ul>
<li>enter</li>
<li>up</li>
<li>down</li>
<li>left</li>
<li>right</li>
<li>esc</li>
<li>space</li>
<li>backspace</li>
<li>tab</li>
<li>delete</li>
</ul>
<h3>See Also:</h3>

<ul>
<li><a href="../../more/Interface/Keyboard.html">MooTools More Keyboard</a></li>
</ul>
<h2 id="DOMEvent:DOMEvent-defineKeys"><a href="#DOMEvent:DOMEvent-defineKey">Function: DOMEvent.defineKeys</a></h2>

<p class="description">This function allows to add additional event key codes.</p>

<h4>Example:</h4>

<pre class="javascript">DOMEvent.<span class="me1">defineKeys</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'16'</span>: <span class="st0">'shift'</span>,
    <span class="st0">'17'</span>: <span class="st0">'control'</span>
<span class="br0">}</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">addEvent</span><span class="br0">(</span><span class="st0">'keydown'</span>, <span class="kw2">function</span><span class="br0">(</span>event<span class="br0">)</span><span class="br0">{</span>
    <span class="kw1">if</span> <span class="br0">(</span>event.<span class="me1">key</span> == <span class="st0">'control'</span><span class="br0">)</span> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'You pressed control.'</span><span class="br0">)</span>;
<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
